<template>
	<view class="my-page-color">
		<view class="padding36 bg-white mb15">
			<view class="order-item-content">
				<view class="my-m-title oellipsis mb15">{{roomInfo.houseName}} </view>
				<view class="mb15">{{roomInfo.name}}</view>
				<view class="justify-start">
					<view class="cover-con">
						<van-image width="239rpx" height="148rpx" fit="cover" :src="roomInfo.image_urls[0]">
						</van-image>
					</view>
					<view @click="goSelectDate" class="step-con">
						<view class="step-item"><span class="dot"></span>入住 {{formData.date_range[0]}}
							{{roomInfo.check_in}}后
						</view>
						<view class="line"></view>
						<view class="step-item mb10"><span class="dot dot2"></span>退房 {{formData.date_range[1]}}
							{{roomInfo.check_out}}前
						</view>
						<view class="flex-row">
							<view class="tag-color-white mr10">共{{selectDate.totalDays}}晚</view>
							<view class="grey-tips f24">均为房源当地时间</view>
						</view>
					</view>
				</view>


				<view class="user-info">
					<view class="user-img">
						<van-image width="59rpx" height="59rpx" fit="cover" :src="roomInfo.landlord.avatar_url" />
					</view>
					<view>ViHome管家 {{roomInfo.landlord.nickname}} </view>
					<!-- <view class="color-orange num">联系房东 </view> -->
				</view>
			</view>
		</view>
		<view class="padding36 bg-white mb15">
			<view class="flex-between mb20 ">
				<view>入住人数</view>
				<view @click="visible = true">
					{{formData.adults}}成人{{formData.kids}}儿童 <van-icon name="arrow" />
				</view>
			</view>
			<view class="flex-between mb20">
				<view>护照</view>
				<view @click="showUpImg" :class="{'color-orange': userInfo.passport_no?false:true }">
					{{userInfo.passport_no?'已完成':'去提交'}} <van-icon name="arrow" />
				</view>
			</view>
			<view class="f33">手机号</view>
			<van-field custom-class="my-textare-class" :value="formData.phone" maxlength="20" show-word-limit="true"
				label=" " :title-width="0" type="textarea" placeholder="必填" autosize :border="false"
				@change="onChange($event, 'phone')" />
			<view class="f33">备注</view>
			<van-field custom-class="my-textare-class" :value="formData.remark" maxlength="50" show-word-limit="true"
				label=" " :title-width="0" type="textarea" placeholder="选填，说明特殊情况" autosize :border="false"
				@change="onChange($event, 'remark')" />
		</view>

		<view class="padding36 bg-white mb15">
			<view class="flex-between mb10">
				<view>押金</view>
				<view>
					{{$formatNumber(roomInfo.deposit) || '-'}}加元
					（钥匙{{$formatNumber(roomInfo.deposit_key)}} + 房损{{$formatNumber(roomInfo.deposit_damage)}}）
				</view>
			</view>
			<view class="grey-tips deposit mb15">由平台监管，退房后10个工作日内自动退回原支付账户</view>
			<view class="flex-between mb10">
				<view>房租</view>
				<view>{{$formatNumber(roomInfo.price_public * selectDate.totalDays)}}加元</view>
			</view>
			<view class="grey-tips deposit ">{{roomInfo.price_public}}加元/晚x{{selectDate.totalDays}}晚</view>
			<van-divider :margin="20" />
			<view class="flex-between mb10">
				<view class="f33">需付款</view>
				<view class="color-red my-new-m-title">
					{{$formatNumber(roomInfo.price_public * selectDate.totalDays + Number(roomInfo.deposit))}} <span
						class="f28">加元</span>
				</view>
			</view>
		</view>
		<view class="padding36 bg-white mb15">

			<notice></notice>
		</view>
		<view class="money-tips">
			<view>温馨提示</view>
			<view class="tips-item">
				<span>1.</span>
				<span> 订单如有疑问，请至「我的」联系平台客服</span>
			</view>
			<view class="tips-item mb40">
				<span>2.</span>
				<span>支付成功后，请进入「我的」-「我的订单」-「全部订单」-「订单详情」查看房源详细地址。</span>
			</view>
			<view class="btn-tips flex-row">
				<van-checkbox checked-color="#FCE353" :value="checkedNotice" shape="square"
					@change="checkedNotice = !checkedNotice">
					我已仔细阅读并同意
				</van-checkbox>
				<span @click="jump" class="color-orange"> 《 房客服务条款》</span>
			</view>
		</view>


		<van-popup :show="visible" close-icon-position="top-left" @close="closeVisble" class="login-confirm" round
			position="bottom" custom-style="padding: 20rpx 35rpx 41rpx;">
			<view>
				<view class="my-s-title">入住人数</view>
				<view class="mb20 flex-between">
					<span>成人</span>
					<van-stepper :min="1" :max="20" @change="onChange($event, 'adults')" :value="formData.adults" />
				</view>
				<view class="mb20 flex-between">
					<span>儿童</span>
					<van-stepper :min="0" :max="20" @change="onChange($event, 'kids')" :value="formData.kids" />
				</view>
			</view>
		</van-popup>



		<footBtn @nextStep="nextStep" :disableBtn="!checkedNotice" btnText="立即预订" :type="3">
			<view class="btn-tips center-all" slot="btnSlot">
				<span class="f30">合计</span>
				<span
					class="color-red ml10 f43">{{$formatNumber(roomInfo.price_public * selectDate.totalDays + Number(roomInfo.deposit))}}</span>
				<span class="color-red f26">加元</span>
			</view>
		</footBtn>
	</view>



</template>

<script>
	import footBtn from '@/components/myBtn/footBtn.vue'
	import notice from '@/components/notice.vue'
	export default {
		components: {
			footBtn,
			notice
		},
		data() {
			return {
				userInfo: this.$getStorage('userInfo'),
				roomInfo: this.$getStorage('roomInfo'),
				selectDate: this.$getStorage('selectDate'),
				refundInfo: '',
				checkedNotice: false,
				visible: false,
				showStep: 1,
				formData: {
					house_id: '', //	是	integer	房屋ID
					room_id: '', //	是	integer	房间ID
					date_range: [], //		是	array	预定时间范围, [Y-m-d, Y-m-d]
					adults: 1, //		是	integer	成人数
					kids: 0, //		是	integer	儿童数
					remark: '', //		是	string	备注信息
					phone: '',
				}
			}
		},
		onShow() {
			this.getImgData();

		},
		mounted() {
			this.formData.phone = this.userInfo.phone;
			this.getConfiguration();
		},
		methods: {
			getConfiguration() {
				this.$http.getConfiguration().then(res => {
					res.forEach(item => {
						if (item.type == 'refund-policy') {
							this.refundInfo = item.content;
						}
					})
				});
			},
			onChange(event, name) {
				this.formData[name] = event.detail;
			},
			closeVisble() {
				this.visible = false;
			},
			showUpImg() {
				this.$goPage(1, '/subOrder/uploadPassport');
			},
			jump() {
				this.$goPage(1, '/subNotice/tenant');
			},
			getImgData() {
				this.selectDate = this.$getStorage('selectDate'),
					this.formData.date_range = [this.$timestampToTime(this.selectDate.startTime), this.$timestampToTime(
						this.selectDate.endTime)];
				 this.userInfo = this.$getStorage('userInfo');
			},
			goSelectDate() {
				console.log(111)
				this.$goPage(1, '/pages/date/selectDate');
			},
			checkData() {
				if (!this.formData.phone) {
					this.$toast('请填写手机号码');
					return false;
				}
				if (!this.userInfo.passport_no) {
					this.$toast('请上传护照');
					return false;
				}
				if (!this.checkedNotice) {
					this.$toast('请仔细阅读房客服务条款并勾选已阅读');
					return false;
				}
				return true;
				
			},
			changeInfo() {
				let data = {
					phone: this.formData.phone
				}
				this.$http.editUserInfo(data).then(res => {
					this.submit()
					this.getUserInfo();
				})
			},
			getUserInfo () {
				this.$http.getUserInfo().then(res => {
					this.$setStorage('userInfo',   res)
					this.userInfo = res;
				})
			},
			nextStep() {
				if(!this.checkData()) {
					return;
				}
			     this.changeInfo();
			
			},
			submit() {
				this.formData.house_id = this.roomInfo.house_id;
				this.formData.room_id = this.roomInfo.id;
				this.$http.addOrder(this.formData).then(res => {
					this.$goPage(3, '/subOrder/orderDetail?orderNumber=' + res.order_number);
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.order-item {
		.my-m-title {
			margin: 0 auto;
			// padding: 20rpx 0;

		}
	}

	.order-item-content {
		color: #444;
		background-color: #fff;

		.cover-con {
			width: 239rpx;
			height: 148rpx;
			border-radius: 12rpx;
			overflow: hidden;
			margin-right: 40rpx;
		}

		.step-con {
			// padding: 40rpx 0  0 0;
			// display: flex;
			// align-items: center;
			// flex-direction: column;
		}

		.step-item {
			font-size: 29rpx;
			color: #444444;
			text-indent: 20rpx;
			height: 26rpx;
			line-height: 26rpx;
			display: flex;
			align-items: center;

			.dot {
				width: 15rpx;
				height: 15rpx;
				background: #52C681;
				border-radius: 50%;
				display: inline-block;
				margin-right: 10rpx;
				vertical-align: middle;
			}

			.dot2 {
				background: #E33838;
			}

		}

		.line {
			width: 15rpx;
			height: 30rpx;
			position: relative;
			left: 0;
			top: 0;
		}

		.line::before {
			content: '';
			width: 4rpx;
			height: 40rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: #D8D8D8;
		}

	}

	.user-info {
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 25rpx;
		color: #222222;
		margin-top: 20rpx;

		.user-img {
			margin-right: 20rpx;
			border-radius: 50%;
			overflow: hidden;
		}

		.num {
			margin-left: 10rpx;
			font-size: 22rpx;
			// padding-bottom:20rpx ;
		}
	}

	.deposit {
		font-size: 25rpx;
		text-align: right;
	}

	.introduction {
		font-weight: bold;
		font-size: 33rpx;
		margin: 30rpx 0;

	}

	.small-title {
		font-size: 30rpx;
	}

	.notice {
		display: flex;
		justify-content: space-between;
	}

	.ask-con {
		.ask-item {
			font-size: 30rpx;
			margin-right: 30rpx;
			line-height: 50rpx;
			display: inline-block;
		}
	}

	.money-tips {
		width: 100%;
		padding: 36rpx 36rpx 250rpx 36rpx;
		font-weight: bold;
		font-size: 27rpx;
		box-sizing: border-box;
		// margin-top: 100rpx;
		color: #999;
		display: inline-block;

		.tips-item {
			display: flex;

			span {
				display: inline-block;
				vertical-align: top;
			}
		}
	}
</style>